<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<meta http-equiv="Cache-Control" content="no-cache"/>
	<meta http-equiv="Pragma" content="no-cache"/>
	<link rel="stylesheet" type="text/css" href="timeline.css"/>
	<title> Google Timeline Mashup Project </title>
	<script src='database.js'></script>
</head>
<body>

	<?php
if(isset($_POST['url']) && $_POST['url'] != ""){
	if(ereg("^([a-zA-Z0-9_\.\-])+(@|%40)(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$", $_POST['url']))
		echo "<script type='text/javascript'>
		window.location.href='timeline.php?url=" . $_POST['url'] . 	"&favorite=false';
	</script>";
	else
		echo "<script type='text/javascript'>
		alert('\"" . $_POST['url'] . "\" is not a valid Google™ Calendar ID. Check the given ID and try again.');
	</script>";
	} else if(isset($_POST['menu'])){
		echo "<script type='text/javascript'>
		for(i = 0; i < database.length; i++){
			if(database[i].name == '" . $_POST['menu'] . "'){
				var url = database[i].url;
				window.location.href='timeline.php?url='+url+'&favorite=true';
			}
		}
		</script>";
	} 
	?>

	<div id="wrapper">

		<div id="header"></div>

		<div align="center" style='vertical-align:center; background-color:#eee; padding-top:35px; padding-bottom:35px; width: 750px; border: 1px solid #aaa'>
			<form action='index.php' method='post'>
				<span style='color:#354'>Insert a Google Calendar ID here:</span> <br/>  <input style='background-color:#cc6; width:400px' type='text' name='url'></input><br/><br/>
				<span style='color:#354'>...or select a favorites </span> <br/> <select style='background-color:#cc6; width:400px' name='menu' id='options' size='1'></select>
				<br/><br/><input style='width:400px; background-color:#000; background-image: url(images/create.png); height:50px' type='submit' value=' '>
			</form>
		</div>
		<div id="footer"></div>
	</div>
</body>

<script type="text/javascript">
for(i = 0; i < database.length; i++){
	document.getElementById("options").innerHTML += "<option style='color:#354; text-align:center'>"+database[i].name+"</option>";
}
</script>
</html>